import React, { FC, useEffect } from 'react';
import { Row, Col, List, Card } from 'antd';
import styles from './ranking-List.less';
import { connect, IndexModelState, ConnectProps } from 'umi';

interface PageProps extends ConnectProps {
  index: IndexModelState;
  dispatch: any;
}

const colors = ['red', 'orange', 'gold', 'pink'];

const RankingList: FC<PageProps> = (props: any) => {
  const { rankingList = [] } = props.index;
  let rankingListContent: any[] = [];

  rankingList.forEach((i: any) => {
    let arr: any[] = [];
    i.list.forEach((item: any, index: number) => {
      if (index < 5) {
        arr.push(item.name);
      }
    });
    rankingListContent.push(arr);
  });

  let getData = (i: string) => {
    props.dispatch({
      type: 'index/getRankingList',
      payload: {
        idx: i,
      },
    });
  };

  useEffect(() => {
    for (let i = 0; i < 4; i++) {
      getData(i.toString());
    }
  }, []);

  return (
    <div className={styles.rankingListContainer}>
      <div className={styles.rankingList}>
        <div className={styles.index__hd}>
          <h2 className="index__tit">
            排行榜
            <small>更多</small>
          </h2>
        </div>

        <div className={styles.content}>
          <Row gutter={25}>
            {rankingList.map((data: any, index: number) => (
              <Col className={styles.gutterRow} span={6} key={index}>
                <Card
                  title={data.title}
                  bodyStyle={{ padding: '0px 24px' }}
                  headStyle={{ backgroundColor: colors[index], color: 'white' }}
                >
                  <List
                    bordered={false}
                    dataSource={rankingListContent[index]}
                    renderItem={item => <List.Item>{item}</List.Item>}
                  />
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>
    </div>
  );
};

export default connect(({ index }: { index: IndexModelState }) => ({ index }))(
  RankingList,
);
